<template>
	<view class="">
		<view class="personal_view" :style="{paddingTop: systemBarHeight + 'px'}">
			<view class="" style="width: 32rpx;">
				
			</view>
			<image src="https://static.gongsizhang.com/2024-02-02-65bbd2f6aee7b.jpg" style="width: 120rpx;height: 120rpx;border-radius: 50%;"/>
			<view class="" style="width: 16rpx;">
				
			</view>
			<view class="personal_header_view">
				<view class="personal_header_view_nickname">
					NICKNAME
				</view>
				<view class="personal_header_view_phone">
					17332091446
				</view>
			</view>
			<view class="" style="flex: 1;">
				
			</view>
			<image src="../static/right_personal.png" style="width: 40rpx;height: 40rpx;"/>
			<view class="" style="width: 32rpx;">
				
			</view>
		</view>
		
		
		
		<view class="" style="height: 24rpx;">
			
		</view>
		
		<view class="kefu_and_que_view">
			<image src="../static/shiyongjiaocheng.png" />
			<image src="../static/zaixiankefu.png" />
		</view>
		
		
		<view class="" style="height: 24rpx;">
			
		</view>
		
		<view class="gongneng_lists">
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					更改密码
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					更改绑定手机号
				</view>
				<view class="" style="flex: 1;text-align: end;color: #CCC;font-size: 20rpx;padding-right: 20rpx;">
					更换手机号使用
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					问题反馈
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					关于我们
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					客服电话
				</view>
				<view class="" style="flex: 1;text-align: end;color: #CCC;font-size: 20rpx;padding-right: 20rpx;">
					400-888-9975
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					更改密码
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
			<view class="gongneng_lists_item">
				<view class="gongneng_lists_item_font">
					注销账号
				</view>
				<image src="../static/right_arrow.png" style="width: 14rpx;height: 14rpx;"/>
			</view>
		</view>
		
		<view class="" style="height: 30rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0
			}
		},
		onLoad() {
			this.getSysteminfo()
		},
		methods: {
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #F9FAFD;
	}
	.gongneng_lists{
		width: 686rpx;
		margin: 0 auto;
		box-shadow: 0px 8px 16px 0px rgba(49,113,216,0.04);
		border-radius: 24rpx;
	}
	.gongneng_lists_item{
		height: 98rpx;
		border-bottom: 1rpx solid #EEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.gongneng_lists_item_font{
		color: #333;
		font-size: 28rpx;
	}
	.kefu_and_que_view{
		display: flex;
		justify-content: space-between;
		width: 686rpx;
		margin: 0 auto;
	}
	.kefu_and_que_view image{
		width: 330rpx;
		height: 330rpx;
		
	}
	.personal_header_view_nickname{
		font-size: 32rpx;
		color: #FFF;
	}
	.personal_header_view_phone{
		font-size: 36rpx;
		font-weight: 500;
		color: #FFF;
	}
	.personal_view{
		width: 750rpx;
		height: 350rpx;
		display: flex;
		align-items: center;
		background: linear-gradient( 126deg, #669EFA 0%, #4185F4 100%);
		box-shadow: 0px 16rpx 32rpx 0px rgba(65,133,244,0.16);
	}
</style>